<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0px;padding:0px;list-style: none;}
        #box{width:800px;height: 400px;background: blue;margin:120px auto}
        #left{width: 200px;height: 400px;float: left;background: orange;}
        #right{width: 600px;height: 400px;float: left; background: green;}
        #left ul li{width:100%;height: 98px;background: greenyellow;line-height: 100px;font-size: 40px;text-align: center;border-bottom: 2px solid blue;}
        #left ul li.active{background: blueviolet;color:#ffffff;}
        #right div{display: none;}
        #right div a{display: block;width: 100%;height:350px;background: yellowgreen;text-align: center;text-decoration: none;font-size: 100px;line-height: 350px;}
        #right div ul{width: 100%;}
        #right div ul li{width: 148px; height: 50px;float: left;background: pink;text-align: center;line-height: 50px;border-right:2px solid blue;}
        #right div ul li.hover{background: #ffffff;color:#000000}
        #right div.active{display: block;}
    </style>
</head>
<body>
    <div id="box">
        <div id="left">
            <ul>
                <li class="active">a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
            </ul>
        </div>
        <div id="right">
              <div class="active">
                  <a href="javascript:;">a1</a>
                  <ul>
                      <li class="hover">a1</li>
                      <li>a2</li>
                      <li>a3</li>
                      <li>a4</li>
                  </ul>
              </div>
              <div>
                <a href="javascript:;">b1</a>
                <ul>
                    <li class="hover">b1</li>
                    <li>b2</li>
                    <li>b3</li>
                    <li>b4</li>
                </ul>
              </div>
              <div>
                <a href="javascript:;">c1</a>
                <ul>
                    <li class="hover">c1</li>
                    <li>c2</li>
                    <li>c3</li>
                    <li>c4</li>
                </ul>
              </div>
              <div>
                <a href="javascript:;">d1</a>
                <ul>
                    <li class="hover">d1</li>
                    <li>d2</li>
                    <li>d3</li>
                    <li>d4</li>
                </ul>
              </div>
        </div>
    </div>
    <script>
        //1、获取元素
        var left_li = document.getElementById("left").getElementsByTagName("li"); //集合 元素比较多，操作一定不能是集合直接操作，必须是元素
        var right_div = document.getElementById("right").getElementsByTagName("div"); //集合 元素比较多  被操作元素
        //2、循环
        for(var i = 0 ; i < left_li.length;i++){
            //4、因为需要操作右侧div的具体显示元素下标，但是下标和左侧li的下标有关系，li的下标和div的下标一一对应
            //前提需要知道每一个左侧的li的下标（自定义索引）
            left_li[i].index = i;
            left_li[i].onmouseover = function(){
                //4、在事件中就干两件事（一个清空所有样式，第二个复活自身样式）
                for(var j = 0 ;j<left_li.length;j++){
                    left_li[j].className = "";
                    right_div[j].className="";
                }
                //3、滑动到谁（this），谁有样式（className）
                this.className = "active";
                right_div[this.index].className = "active";
            }
        }

        var right_div_li = right_div[0].getElementsByTagName("li");
        var right_div_a = right_div[0].getElementsByTagName("a")[0];
        for(var i = 0 ; i < right_div_li.length;i++){
            right_div_li[i].onmouseover = function(){
                for(var j = 0 ;j<right_div_li.length;j++){
                    right_div_li[j].className = "";
                }
                //3、滑动到谁（this），谁有样式（className）
                this.className = "hover";
                //a的值来自于滑动元素的值
                right_div_a.innerText = this.innerText;
            }
        }
        // var right_div_li = right_div[1].getElementsByTagName("li");
        // var right_div_a = right_div[1].getElementsByTagName("a")[0];
        // for(var i = 0 ; i < right_div_li.length;i++){
        //     right_div_li[i].onmouseover = function(){
        //         for(var j = 0 ;j<right_div_li.length;j++){
        //             right_div_li[j].className = "";
        //         }
        //         //3、滑动到谁（this），谁有样式（className）
        //         this.className = "hover";
        //         //a的值来自于滑动元素的值
        //         right_div_a.innerText = this.innerText;
        //     }
        // }

        //封装函数达到功能复用性
        Tab(right_div[0]);
        Tab(right_div[1]);
        Tab(right_div[2]);
        Tab(right_div[3]);
        function Tab(parent){
            var right_div_li = parent.getElementsByTagName("li");
            var right_div_a = parent.getElementsByTagName("a")[0];
            for(var i = 0 ; i < right_div_li.length;i++){
                right_div_li[i].onmouseover = function(){
                    for(var j = 0 ;j<right_div_li.length;j++){
                        right_div_li[j].className = "";
                    }
                    //3、滑动到谁（this），谁有样式（className）
                    this.className = "hover";
                    //a的值来自于滑动元素的值
                    right_div_a.innerText = this.innerText;
                }
            }
        }
    </script>
</body>
</html>